<template>
	<view class="" style="background-color: #d70127;">
		<view class="content">
			<view class="df-sb" style="margin-top: 80rpx;border: 1px solid #FDE8CE;padding: 10rpx 20rpx;">
				<u--input placeholder="输入手机号/账号搜素" border="none" color="#fff" @input="input"
					v-model="searchValue"></u--input>
			</view>
			<view class="box" style="padding-top: 50rpx;">
				<view class="" style="color: #fff;"> 剩余赠送积分:{{allPoints}} </view>
				<view class="df-sb" style="padding-top: 50rpx;">
					<view class="phoneText" style="">赠送积分 </view>
					<view class="ipt">
						<input type="text" placeholder="请输入赠送积分" style="font-size: 26rpx;color: #FDE8CE;"
							placeholder-class="placeholderStyle" v-model="point" />
					</view>
				</view>
				<!-- <view class="" style="color:#FDE8CE;margin-top: 50rpx;font-weight: 600;font-size: 28rpx;"> 选择用户 </view> -->
				<scroll-view class="list" :scroll-y="true">
					<view class="df-flex" style="margin-top: 40rpx;" v-for="(item,index) in demoList" :key="index"
						@click="select_click(index,item)" :class="select_index == index?'ace':'select_item' ">
						<view class=""
							style="display: flex;flex-direction: column;justify-content: center;margin-left: 20rpx;">
							<!-- <view class="df-flex"> -->
							<view class="" style="margin-bottom: 20rpx;"> 姓名：{{item.realname}} </view>
							<view class="" style="margin-bottom: 20rpx;"> 账号：{{item.username}}
							</view>
							<!-- </view> -->
							<view class="">手机号： {{item.phone}} </view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="df-flex" style="justify-content: center;">
				<view class="btn" @click="gift"> 赠送 </view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUserList,
		merchantsAddPointsToUsers,
		getALlAmountByUserId
	} from '../request/api.js'
	export default {
		data() {
			return {
				select_index: 0, //当前序号
				userList: [], // 用户列表
				searchValue: '',
				demoList: [],
				selectInfo: {},
				point: '',
				allPoints: 0
			}
		},
		onLoad() {},
		onShow() {
			this.userList = []
			this.getUserListMethod()
			this.getALlAmountByUserIdMethod()
		},
		methods: {
			// 根据商家ID查询当前剩余可用的积分
			getALlAmountByUserIdMethod() {
				getALlAmountByUserId({
					userId: uni.getStorageSync('userInfo').id
				}).then(res => {
					if (res.code == 200) {
						this.allPoints = res.result
					}
				})
			},
			//输入框输入
			input() {
				if (!this.searchValue) {
					this.demoList = [];
					return;
				}
				this.demoList = this.userList.filter(user => {
					return (user.phone.includes(this.searchValue) || user.username.includes(this.searchValue));
				});
			},
			//赠送积分
			gift() {
				let that = this;
				merchantsAddPointsToUsers({
					userId: that.selectInfo.id,
					point: that.point,
					merchantId: uni.getStorageSync('userInfo').id
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '赠送成功',
							icon: 'none'
						})
						that.point = ''
					}
				})
			},
			//获取用户列表
			getUserListMethod() {
				let that = this;
				let array = []
				getUserList({
					phone: this.searchValue,
					userType: 1,
					pageSize: 99
				}).then(res => {
					if (res.success) {
						getUserList({
							phone: this.searchValue,
							userType: 2,
							pageSize: 99
						}).then(r => {
							if (res.success) {
								array = [...res.result.records, ...r.result.records]
								that.userList = array.filter(user => user.id !== uni.getStorageSync(
									'userInfo').id);
								// that.demoList = that.userList;
								that.selectInfo = that.userList[0]
							}
						})
					}
				})
			},
			// tab点击
			select_click(idnex, info) {
				this.select_index = idnex;
				this.selectInfo = info;
			},
		}
	}
</script>
<style lang="scss">
	.content {
		height: 100vh;
		background: url('/static/image/bg2.png') no-repeat center center;
		background-size: 100% 100%;
		padding: 0 30rpx;
		padding-bottom: 200rpx;
		overflow: hidden;

		.backIcon {
			margin-top: 50rpx;
		}

		.topOne {
			justify-content: center;
			display: flex;
			margin-bottom: 45rpx;

			.indexText {
				width: 500rpx;
				height: 170rpx;
				padding-top: 80rpx;
			}
		}

		.topTwo {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			// margin-bottom: 60rpx;
			.line {
				width: 690rpx;
				height: 1px;
				border-top: 1rpx solid;
				border-image: linear-gradient(270deg, rgba(252, 238, 220, 0), rgba(255, 250, 243, 1), rgba(252, 238, 220, 0)) 1 1;
			}

			.text2 {
				width: 480rpx;
				height: 31rpx;
				font-size: 24rpx;
				color: #FDE8CE;
				line-height: 31rpx;
				text-align: left;
				font-style: normal;
				text-align: center;
				margin: 13rpx 0;
			}
		}

		.box {
			width: 100%;
			// height: 552rpx;
			// background: #d70127;
			padding: 0 50rpx;
			// overflow: hidden;
		}
	}

	.phoneText {
		font-size: 26rpx;
		color: #FDE8CE;
		font-weight: 600;
		height: 50rpx;
	}

	.ipt {
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 40rpx;
		border-bottom: 1px solid #FDE8CE;
		width: 448rpx;
	}

	.loginBtn {
		width: 256rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: linear-gradient(#BA986B 0%, #F1DBB6 100%);
		border-radius: 37rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #2B1D14;
		text-align: center;
		margin-top: 145rpx;
	}

	.register {
		text-align: right;
		color: #FDE8CE;
		margin-top: 40rpx;
		font-size: 24rpx;
	}

	.placeholderStyle {
		color: #FDE8CE
	}

	.list {
		margin-top: 20rpx;
		height: 800rpx;
		color: #FDE8CE
	}

	.ace {
		border: 1px solid #fff;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.select_item {
		padding: 20rpx;
	}

	.placeholderClass {
		color: #fff;
	}

	.btn {
		width: 304rpx;
		height: 59rpx;
		line-height: 59rpx;
		background: linear-gradient(#BA986B 0%, #F1DBB6 100%);
		border-radius: 37rpx;
		text-align: center;
		color: #2B1D14;
		font-weight: 600;
		margin-top: 50rpx;
	}
</style>